<template>
  <div class="danmaku-manage">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        v-model="keyword"
        placeholder="输入视频名称搜索"
        class="search-input"
      ></el-input>
      <el-button type="success" @click="search">查询</el-button>
    </div>

    <!-- 弹幕内容区域 -->
    <div class="content-area">
      <div class="header-row">
        <div class="header-item">发送者</div>
        <div class="header-item">播放时间</div>
        <div class="header-item">弹幕内容</div>
        <div class="header-item">发送时间</div>
        <div class="header-item">操作</div>
      </div>

      <!-- 弹幕列表 -->
      <div class="danmaku-list">
        <div
          v-for="(item, index) in danmakuList"
          :key="index"
          class="danmaku-item"
        >
          <div class="danmaku-sender">{{ item.sender }}</div>
          <div class="danmaku-time">{{ item.playTime }}</div>
          <div class="danmaku-content">
            <div class="content-text">{{ item.content }}</div>
            <div class="content-video">{{ item.videoTitle }}</div>
          </div>
          <div class="danmaku-send-time">{{ item.sendTime }}</div>
          <div class="danmaku-operations">
            <el-button
              type="primary"
              size="small"
              link
              @click="deleteDanmaku(item)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="total">共 {{ total }} 条</span>
        <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[15, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqDelete, reqList } from '@/api/mis/danmaku'
import { ElMessage } from 'element-plus'

// 分页相关
const current = ref(1)
const pageSize = ref(15)
const total = ref(60)

// 搜索关键字
const keyword = ref('')

// 模拟弹幕数据
const danmakuList = ref([
  {
    id: 1,
    sender: 'btj123',
    playTime: '00:03',
    content: '111',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-30 13:45:07',
  },
  {
    id: 2,
    sender: 'mu',
    playTime: '01:47',
    content: '6666',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-29 16:09:31',
  },
  {
    id: 3,
    sender: '爱哭的妹妹你听我说',
    playTime: '00:09',
    content: '真的好',
    videoTitle:
      '视频：这样的田园生活实在令人羡慕，明媚的下午，我就会去农村去玩',
    sendTime: '2024-10-29 00:07:33',
  },
  {
    id: 4,
    sender: '41654651545',
    playTime: '00:27',
    content: 'nihao',
    videoTitle: '视频：带几朋友，我们旅游村庄生活真不错',
    sendTime: '2024-10-27 21:18:30',
  },
  {
    id: 5,
    sender: '愚你学的鸭',
    playTime: '00:15',
    content: 'as',
    videoTitle: '视频：音乐的打动 带的白帽 赵本山',
    sendTime: '2024-10-27 17:41:36',
  },
  {
    id: 6,
    sender: '佩奇',
    playTime: '00:01',
    content: 'wwww',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-21 22:41:41',
  },
  {
    id: 7,
    sender: 'GG boom',
    playTime: '02:23',
    content: '萨达萨达是',
    videoTitle: '视频：最力所能及地实时并共同',
    sendTime: '2024-10-16 14:06:01',
  },
  {
    id: 8,
    sender: 'sxm',
    playTime: '00:47',
    content: '1',
    videoTitle:
      '视频：这样的田园生活实在令人羡慕，明媚的下午，我就会去农村去玩',
    sendTime: '2024-10-16 09:04:52',
  },
  {
    id: 9,
    sender: 'tashin',
    playTime: '01:58',
    content: '1111',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-14 21:15:02',
  },
  {
    id: 10,
    sender: 'jjah',
    playTime: '02:20',
    content: 'hhhhh',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-11 17:45:27',
  },
  {
    id: 11,
    sender: 'KingOfDuck',
    playTime: '02:43',
    content: '居然有弹幕',
    videoTitle: '视频：不装逼、装逼怪 赵本山经典小品',
    sendTime: '2024-10-11 16:33:49',
  },
])

// 挂载完成后获取弹幕列表
onMounted(() => {
  // getAllDanmakus()
})

// 获取所有弹幕的方法
const getAllDanmakus = async () => {
  try {
    const params = {
      current: current.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
    }

    const result = await reqList(params)
    if (result.code === '0') {
      // danmakuList.value = result.data.records || []
      // total.value = result.data.total || 0
    }
  } catch (error) {
    console.error('获取弹幕列表失败', error)
  }
}

// 当前页改变时的回调
const handleCurrentChange = () => {
  getAllDanmakus()
}

// 每页数据条数变化时的回调
const handleSizeChange = () => {
  current.value = 1
  getAllDanmakus()
}

// 搜索按钮的回调
const search = () => {
  current.value = 1
  getAllDanmakus()
}

// 删除弹幕
const deleteDanmaku = async (row: any) => {
  try {
    const result = await reqDelete({ id: row.id })
    if (result.code === '0') {
      ElMessage({ type: 'success', message: '删除成功！' })
      getAllDanmakus()
    } else {
      ElMessage({ type: 'error', message: result.message || '删除失败！' })
    }
  } catch (error) {
    ElMessage({ type: 'error', message: '删除失败！' })
  }
}
</script>

<style scoped lang="scss">
.danmaku-manage {
  padding: 0 10px;

  .search-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .search-input {
      width: 300px;
      margin-right: 10px;
    }
  }

  .content-area {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-row {
      display: flex;
      padding: 12px 20px;
      border-bottom: 1px solid #ebeef5;
      font-size: 14px;
      color: #606266;

      .header-item {
        &:nth-child(1) {
          // 发送者
          flex: 0 0 100px;
        }

        &:nth-child(2) {
          // 播放时间
          flex: 0 0 80px;
        }

        &:nth-child(3) {
          // 弹幕内容
          flex: 1;
        }

        &:nth-child(4) {
          // 发送时间
          flex: 0 0 160px;
          text-align: center;
        }

        &:nth-child(5) {
          // 操作
          flex: 0 0 80px;
          text-align: center;
        }
      }
    }

    .danmaku-list {
      .danmaku-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #ebeef5;

        &:nth-child(odd) {
          background-color: #f8f8f9;
        }

        &:hover {
          background-color: #f5f7fa;
        }

        .danmaku-sender {
          flex: 0 0 100px;
          font-size: 14px;
          color: #606266;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .danmaku-time {
          flex: 0 0 80px;
          font-size: 14px;
          color: #606266;
        }

        .danmaku-content {
          flex: 1;
          padding-right: 15px;

          .content-text {
            font-size: 14px;
            color: #303133;
            margin-bottom: 6px;
          }

          .content-video {
            font-size: 12px;
            color: #909399;
          }
        }

        .danmaku-send-time {
          flex: 0 0 160px;
          font-size: 14px;
          color: #606266;
          text-align: center;
        }

        .danmaku-operations {
          flex: 0 0 80px;
          text-align: center;
        }
      }
    }

    .pagination-container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 15px 20px;

      .total {
        font-size: 13px;
        color: #606266;
        margin-right: 15px;
      }
    }
  }
}
</style>
